<!--
 * @Descripttion: 文件说明
 * @version: 0.0.1
 * @Author: gaojiapeng
 * @Date: 2021-02-18 07:58:07
 * @LastEditors: gaojiapeng
 * @LastEditTime: 2021-02-19 12:54:26
-->
<template>
  <div class="layoutBox">
    <div class="box-title">
      <img :src="icon_title" />
      <span class="text">
        {{ title }}
      </span>
      <img style="transform: rotate(180deg)" :src="icon_title" />
    </div>
    <div class="box-body">
      <div class="top">
        <div class="left"></div>
        <div class="right"></div>
      </div>
      <div class="bottom-left-1"></div>
      <div class="bottom-left-2"></div>
      <div class="bottom-right-1"></div>
      <div class="bottom-right-2"></div>
      <slot></slot>
    </div>
  </div>
</template>
<script>
import icon_title from "./image/icon-title.png";
export default {
  name: "layoutBox",
  props: {
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      icon_title,
    };
  },
};
</script>
<style lang="scss" scoped>
$line-bg: #51b3f6;
.layoutBox {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 4px;
  .box-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #4cf9ff;
    height: 32px;
    padding-bottom: 8px;
    .text {
      padding: 0 20px;
    }
    img {
      width: 54px;
      height: 7px;
    }
  }
  .box-body {
    flex: 1;
    overflow-y: hidden;
    background-size: 100% 100%;
    position: relative;
    background-color: rgba(#ffffff, 0.05);
    .top {
      position: absolute;
      height: 1px;
      width: 100%;
      background: rgba(81, 179, 246, 0.2);
      .left {
        position: absolute;
        width: 4px;
        height: 2px;
        left: 0;
        background: $line-bg;
      }
      .right {
        position: absolute;
        width: 4px;
        height: 2px;
        right: 0;
        background: $line-bg;
      }
    }
    .bottom-left-1 {
      background: $line-bg;
      position: absolute;
      width: 1px;
      height: 8px;
      left: 0;
      bottom: 0;
    }
    .bottom-left-2 {
      background: $line-bg;
      position: absolute;
      width: 8px;
      height: 1px;
      left: 0;
      bottom: 0;
    }
    .bottom-right-1 {
      background: $line-bg;
      position: absolute;
      width: 8px;
      height: 1px;
      right: 0;
      bottom: 0;
    }
    .bottom-right-2 {
      background: $line-bg;
      position: absolute;
      width: 1px;
      height: 8px;
      right: 0;
      bottom: 0;
    }
  }
}
</style>
